<html>
    <head>
        <style>
            table {
                border-collapse: collapse; /* Ensures borders don't double up */
                width: 100%;
            }
            th, td {
                border: 1px solid black; /* Adds a black border around cells */
                padding: 8px;
                text-align: left;
            }
            th {
                background-color: #f2f2f2; /* Light gray background for header */
            }
        </style>
    </head>  
    <body>
        <h1>Example Document</h1>
        <h2>Introduction</h2>
        <p>This is the first paragraph of the introduction.</p>
        <h2>Background</h2>
        <p>Some background information here.</p>
        <ul>
            <li>First item in unordered list
                <ul>
                    <li>Nested item 1</li>
                    <li>Nested item 2</li>
                </ul>
            </li>
            <li>Second item in unordered list</li>
        </ul>
        <ol>
            <li>First item in ordered list
                <ol>
                    <li>Nested ordered item 1</li>
                    <li>Nested ordered item 2</li>
                </ol>
            </li>
            <li>Second item in ordered list</li>
        </ol>
        <h2>Data Table</h2>
        <table>
            <tr>
                <th>Header 1</th>
                <th>Header 2</th>
                <th>Header 3</th>
            </tr>
            <tr>
                <td>Row 1, Col 1</td>
                <td>Row 1, Col 2</td>
                <td>Row 1, Col 3</td>
            </tr>
            <tr>
                <td>Row 2, Col 1</td>
                <td>Row 2, Col 2</td>
                <td>Row 2, Col 3</td>
            </tr>
            <tr>
                <td>Row 3, Col 1</td>
                <td>Row 3, Col 2</td>
                <td>Row 3, Col 3</td>
            </tr>
        </table>
    </body>
</html>
